<template>
  <el-main>
    <br/>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-col :span="24">
        <el-form-item label-width="130px" label="收房合同编号" prop="sfContractNo">
          <el-col :span="12">
            <el-input v-model="ruleForm.sfContractNo" disabled :style="{width: '70%'}"></el-input>
          </el-col>
          <el-button type="warning" @click="sdQeury">收房合同查询</el-button>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-col :span="12">
          <el-form-item label="房产信息" prop="houseName" label-width="130px">
            <el-input v-model="ruleForm.houseName" disabled :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-col>
      <el-col :span="24">
        <el-col :span="12">
          <el-form-item label="业主姓名" prop="ownerName" label-width="130px">
            <el-input v-model="ruleForm.ownerName" disabled :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业主手机号" prop="ownerMobile" label-width="130px">
            <el-input v-model="ruleForm.ownerMobile" disabled :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-col>
      <el-col :span="24">
        <el-col :span="12">
          <el-form-item label="业主身份证号" prop="ownerIdCard" label-width="130px">
            <el-input v-model="ruleForm.ownerIdCard" disabled :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银行卡号" prop="bankCard" label-width="130px">
            <el-input v-model="ruleForm.bankCard" disabled :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-col>
      <el-col :span="24">
        <el-col :span="12">
          <el-form-item label="银行名称" prop="bankName" label-width="130px">
            <el-input v-model="ruleForm.bankName" disabled :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开户行" prop="bankOpen" label-width="130px">
            <el-input v-model="ruleForm.bankOpen" disabled :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-col>
      <hr/>
      <el-col :span="24">
        <el-col :span="12">
          <el-form-item label="金融产品选择" prop="productId" label-width="130px">
            <el-select v-model="ruleForm.productId" placeholder="请选择" :style="{width: '80%'}" @change="getrProduct(ruleForm.productId)" >
              <el-option v-for="p in this.JrProductData" :label="p.jrProductName" :value="p.id" ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="年利率" prop="rate" label-width="130px">
          <el-input v-model="ruleForm.rate" :style="{width: '80%'}"></el-input>
        </el-form-item>
        </el-col>
      </el-col>
      <el-col :span="24">
        <el-col :span="12">
          <el-form-item label="借款期限" prop="periods" label-width="130px">
            <el-input v-model="ruleForm.periods" :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年一次服务费率" prop="serviceFee" label-width="130px">
            <el-input v-model="ruleForm.serviceFee" :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-col>
      <el-col :span="24">
        <el-col :span="12">
          <el-form-item label="借款金额" prop="balance" label-width="130px">
            <el-input v-model="ruleForm.balance" disabled :style="{width: '80%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="授信额度" prop="creditLine" label-width="130px">
            <el-input  v-model="ruleForm.creditLine" disabled :style="{width: '30%'}"></el-input>%
          </el-form-item>
        </el-col>
      </el-col>
      <el-col :span="24">
        <el-form-item>
          <template slot-scope="scope">
            <el-button type="warning" @click="tolistSfLoan(scope.row)">分期计算详情</el-button>
          </template>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <div v-if="this.open2">
          <el-table
            :data="listSfLoanData"
            style="width: 100%">
            <el-table-column
              prop="no"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="realEstateInfo"
              label="房产信息">
            </el-table-column>
            <el-table-column
              prop="roomCode"
              label="房产编号">
            </el-table-column>
            <el-table-column
              prop="monthRepaymentAmount"
              label="账单还款金额">
            </el-table-column>
            <el-table-column
              prop="monthRateAmount"
              label="账期利息">
            </el-table-column>
            <el-table-column
              label="借款期限">
              <template slot-scope="scope">
                {{scope.row.starLoanday+"至"+scope.row.endLoanday}}
              </template>
            </el-table-column>
          </el-table>
          <hr/>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="应付租约合计:"  label-width="130px">
                <el-input v-model="ruleForm.payAbleCount" disabled :style="{width: '80%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="还款总额合计:"  label-width="130px">
                <el-input v-model="ruleForm.rePaymentCount" disabled :style="{width: '80%'}"></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="服务费:"  label-width="130px">
                <el-input v-model="ruleForm.serviceFee" disabled :style="{width: '80%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收房贷利息合计:"  label-width="130px">
                <el-input v-model="ruleForm.interestCount" disabled :style="{width: '80%'}"></el-input>
              </el-form-item>
            </el-col>
          </el-col>
        </div>
      </el-col>
      <el-col :span="24">
        <el-form-item label="备注:" prop="remarks" label-width="130px">
          <el-input type="textarea" size="200" v-model="ruleForm.remarks" :style="{width: '80%'}"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item>
          <el-button type="warning" @click="submitForm('ruleForm')">提交申请</el-button>
        </el-form-item>
      </el-col>
    </el-form>

    <!--    收房合同查询-->
    <el-dialog title="收房合同查询" :visible.sync="open">
      <el-form :inline="true" :model="queryData" class="demo-form-inline">
        <el-form-item label="小区名称">
          <el-input v-model="queryData.premiseName"></el-input>
        </el-form-item>
        <el-form-item label="业主姓名">
          <el-input v-model="queryData.ownerName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="sdQeury">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData">
        <el-table-column property="ownerName" label="业主姓名"></el-table-column>
        <el-table-column property="houseName" label="房产信息"></el-table-column>
        <el-table-column property="conSignTime" label="签约日期">
          <template slot-scope="scope">
            <span v-if="scope.row.conSignTime!= null">
              {{ parseTime(scope.row.conSignTime, "{y}/{m}/{d}") }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" @click="IsOn(scope.row.id)" plain>选中</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.queryData.pageNum"
        :page-sizes="[3, 5, 7, 10]"
        :page-size="this.queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total">
      </el-pagination>
    </el-dialog>
  </el-main>
</template>

<script>


import {listSfLoan, savesf, searchProduct, searchProductById, searchSfAllById} from "@/api/banking/collectmortgage";
import {terminationList} from "@/api/contract/termination";

export default {
  name: "index",
  data() {
    return{
      //分期计算详情
      listSfLoanData: [],
      open2: false,
      //金融产品下拉框数据
      JrProductData: [],
      //收房查询开关
      open:false,
      //收房数据
      tableData: [],
      queryData:{
        pageNum : 1,
        pageSize : 10,
        ownerName: undefined,
        houseName: undefined,
        conSignTime: undefined
      },
      total: undefined,
      /*列表*/
      ruleForm: {
        ownerMobile: undefined,
        ownerName: undefined,
        ownerIdCard: undefined,
        bankCard: undefined,
        bankName: undefined,
        bankOpen: undefined,
        creditLine: undefined,
        //收房合同ID
        id:undefined,
        contractId:undefined,
        sfContractNo:undefined,
        houseName:undefined,
        // 利率
        rate:undefined,
        // 一次性服务费
        serviceFee:undefined,
        // 借款金额(授信额)
        sxBalance:undefined,
        //(应付租约)
        balance: undefined,
        // 借款期限
        periods:undefined,
        //合同期限
        periodsA:undefined,
        // 金融产品ID
        productId: undefined,
        //备注
        remarks: undefined,
        //应付租约合计
        payAbleCount: undefined,
        //还款总额合计
        rePaymentCount: undefined,
        //服务费
        serCharge: undefined,
        //收房贷利息合计
        interestCount: undefined,
        startDate: undefined,
        endDate: undefined,
      },
      rules: {
        sfContractNo: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        houseName: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        ownerName: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        ownerMobile: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        ownerIdCard: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        bankCard: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        bankName: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        bankOpen: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        productId: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        rate: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        serviceFee: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        balance: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        periods: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
        creditLine: [
          { required: true, message: '不可为空', trigger: 'blur' },
        ],
      }
    }
  },
  methods :{
    tolistSfLoan(row) {
      if (!this.ruleForm.rate) {
        this.$message.error("年利率不可为空");
      }
      else if (!this.ruleForm.serviceFee) {
        this.$message.error("年一次性服务费率不可为空")
      }
      else if (!this.ruleForm.productId) {
        this.$message.error("请选择金融产品");
      } else {
        listSfLoan(this.ruleForm).then(res=>{
          this.open2 = true;
          console.log("分期数据:", res);
          this.listSfLoanData = res.sfr.sfLoan;
          this.ruleForm.payAbleCount = res.sfr.payAbleCount;
          this.ruleForm.rePaymentCount = res.sfr.rePaymentCount;
          this.ruleForm.serCharge = res.sfr.serCharge;
          this.ruleForm.interestCount = res.sfr.interestCount;
          this.ruleForm.sxBalance = res.sfr.sxAbleCount;
        })
      }
    },
    //选择金融产品
    getrProduct(id) {
      console.log("选择金融产品ID", id);
      searchProductById(id).then(res=>{
        console.log("金融数据:", res);
        this.ruleForm.periods = res.msgData.instalmentPeriod;
        this.ruleForm.creditLine = res.msgData.creditLine;
      })
    },
    //提交申请
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.open2) {
            savesf(this.ruleForm).then(res => {
              if (res.errCode == 500) {
                this.$message.error(res.message);
              } else {
                //保存成功刷新页面
                this.$message.success("保存成功");
                // this.$router.go(0);
                // location.reload();
                this.$router.push("/banking/financialproducts");
              }
            });
          } else {
            this.$message.error("请先点击分期详情");
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //收房合同查询
    sdQeury() {
      this.open = true;
      terminationList(this.queryData).then(res=>{
        console.log("查询合同信息:", res);
        this.tableData = res.msgData.list;
        this.queryData.pageSize = res.msgData.pageSize;
        this.queryData.pageNum = res.msgData.pageNum;
        this.total = res.msgData.total;
      })
    },
    //分页
    handleSizeChange(pageSize) {
      console.log(`每页 ${pageSize} 条`);
      this.queryData.pageSize = pageSize;
      this.queryData.pageNum = 1;
      this.sdQeury();
    },
    handleCurrentChange(pageNum) {
      console.log(`当前页: ${pageNum}`);
      this.queryData.pageNum = pageNum;
      this.sdQeury();
    },
    //选中
    IsOn(sfContractId) {
      this.open = false;
      //每次选择前先清空
      this.ruleForm.ownerMobile=undefined;
      this.ruleForm.ownerName= undefined;
      this.ruleForm.ownerIdCard= undefined;
      this.ruleForm.bankCard= undefined;
      this.ruleForm.bankName=undefined;
      this.ruleForm.bankOpen= undefined;
      this.ruleForm.creditLine= undefined;
      this.ruleForm.id=undefined;
      this.ruleForm.contractId=undefined;
      this.ruleForm.sfContractNo=undefined;
      this.ruleForm.houseName=undefined;
      this.ruleForm.rate=undefined;
      this.ruleForm.serviceFee=undefined;
      this.ruleForm.sxBalance=undefined;
      this.ruleForm.balance= undefined;
      this.ruleForm.periods=undefined;
      this.ruleForm.periodsA=undefined;
      this.ruleForm.productId= undefined;
      this.ruleForm.remarks= undefined;
      this.ruleForm.payAbleCount= undefined;
      this.ruleForm.rePaymentCount= undefined;
      this.ruleForm.serCharge= undefined;
      this.ruleForm.interestCount= undefined;
      this.ruleForm.startDate= undefined;;
      this.ruleForm.endDate=undefined;
      this.open2 = false;
      console.log("选中ID:", sfContractId);
      searchSfAllById(sfContractId).then(res=> {
        console.log("选中数据:", res);
        this.ruleForm.id = res.msgData.id;
        this.ruleForm.contractId = res.msgData.id;
        this.ruleForm.sfContractNo = res.msgData.sfContractNo;
        this.ruleForm.houseName = res.msgData.houseName;
        this.ruleForm.premiseName = res.msgData.premiseName;
        this.ruleForm.ownerName = res.msgData.ownerName;
        this.ruleForm.ownerMobile = res.msgData.ownerMobile;
        this.ruleForm.ownerIdCard = res.msgData.ownerIdCard;
        this.ruleForm.bankCard = res.msgData.bankCard;
        this.ruleForm.bankName = res.msgData.bankName;
        this.ruleForm.bankOpen = res.msgData.bankOpen;
        this.ruleForm.balance = res.msgData.balance;
        this.ruleForm.sxBalance = res.msgData.sxBalance;
        this.ruleForm.periodsA = res.msgData.periods;
        this.ruleForm.startDate = res.msgData.startDate;
        this.ruleForm.endDate = res.msgData.endDate;
      })
    },
    //
    add() {
      console.log("保存解约信息:", this.ruleForm);
      addTermination(this.ruleForm).then(res=>{
        console.log("保存成功");
        this.ruleForm.sfContractId=undefined;
        this.ruleForm.sfContractNo=undefined;
        this.ruleForm.houseName=undefined;
        this.ruleForm.cqAddress=undefined;
        this.ruleForm.houseZsNo=undefined;
        this.ruleForm.ownerName=undefined;
        this.ruleForm.ownerMobile=undefined;
        this.ruleForm.signUserName=undefined;
        this.ruleForm.signUserMobile= undefined;
        this.ruleForm.wyjgDate=undefined;
        this.ruleForm.terminationType=undefined;
        this.ruleForm.remark=undefined;
        this.ruleForm.contractPhotos= [];
        this.ruleForm.propertyDeliverys= [];
        this.ruleForm.otherPhotos= [];
        this.activeIndex = '1';
        this.$router.push("/contract/cancellist");
      })
    },
    //金融产品下拉框数据
    getSearchProductList() {
      searchProduct().then(res=>{
        console.log("下拉框数据:", res);
        this.JrProductData = res.msgData;
      })
    }
  },
  created() {
    this.getSearchProductList();
  }
}
</script>

<style scoped>
.c_shouldBack{
  width: 1200px;
  border:solid 1px #ddd;
  margin-left: 48px;
  border-bottom: none;
  margin-bottom: -10px;
  border-top: solid 5px #ffa800;
  padding: 7px 0px;
  text-indent: 5px;
  margin-top: 40px;
}

</style>
